<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<!-- meta使用viewport以确保页面可自由缩放 -->
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<title>标签页面</title>
		<link rel="stylesheet" href="css/weui.min.css">
		<link rel="stylesheet" href="css/jquery-weui.min.css" />
		<link rel="stylesheet" href="css/tag-list.css">
		<style type="text/css">

		</style>
		<!-- 图标 -->
		<script src="//at.alicdn.com/t/font_748398_ozk4d5k332j.js"></script>
		<!--LOGO-->
		<script src="//at.alicdn.com/t/font_756404_3wfwbvrruoy.js"></script>
	</head>

	<body>
		<div class="header weui-flex">
			<div id="btn-back" class="title-icon-box" onClick="javaScript:history.go(-1)">
				<svg class="icon title-icon" aria-hidden="true">
					<use xlink:href="#icon-fanhui"></use>
				</svg>
			</div>
			<div class="my-flex"></div>
			<div class="title-box">
				<a class="btn-title left" href="javascript:void(0);" onclick="titleAction(0,true)">收入</a>
				<a class="btn-title right" href="javascript:void(0);" onclick="titleAction(1,true)">支出</a>
			</div>
			<div class="my-flex"></div>
			<div class="title-icon-box" onclick="add()">
				添加
			</div>
		</div>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide ">
					<div id="i-box" class="main">
						
					</div>
				</div>
				<div class="swiper-slide">
					<div id="o-box" class="main">
						
					</div>
				</div>
			</div>
		</div>


		<script src="js/jquery-2.1.4.js"></script>
		<script src="js/jquery-weui.js"></script>
		<script src="js/jquery.swipe.js"></script>
		<script src="js/swiper.min.js"></script>
		<script src="js/city-picker.min.js"></script>
		<script src="js/common.js"></script>
		<script src="js/layer.js"></script>
		<script src="js/api.js"></script>
		<script>
			var mSwiper; //滑动组件
			var userId;
			
			$(function() {
				userId = API.getStorage("user");
				if(!userId){
					//检验是否登录
					window.location.href = 'login.html?error=1';
					return;
				}
				
				//优良提示
				var a = getUrlParam("success");
			    if (a != null && a != '') {
			        if (a == '1') {
			            $.toptip('添加成功','success');
			        }
			        if (a == '2') {
			            $.toptip('修改成功','success');
			        }
			    }
				
				API.showLoading('加载中...');
				
				API.getTag(userId,function(data){
					API.hideLoading();
					if(data.code == 0){
						var list = data.data;
						for(var i = 0; i<list.length;i++){
							if(list[i].type == 0){
								$('#i-box').append(getItemDom(list[i]));
							}else{
								$('#o-box').append(getItemDom(list[i]));
							}
						}
					}else{
						alert(data.msg);
					}
				});
				
				var type = getUrlParam('type');
				if(!!type && type == 1){
					$('.btn-title.right').addClass('action');
				}else{
					$('.btn-title.left').addClass('action');
				}
				
				mSwiper = new Swiper('.swiper-container', {
					initialSlide: !!type ? type : 0,
					pagination: {
						el: '.swiper-pagination',
						type: 'progressbar',
					}
				});

				mSwiper.on('transitionEnd', function() {
					titleAction(mSwiper.activeIndex, false);
				});

			});
			
			function edit(id){
				window.location.href = 'tag_add.html?type='+ mSwiper.activeIndex +'&id='+id;
			}
			
			function add(){
				window.location.href = 'tag_add.html?type='+ mSwiper.activeIndex;
			}
			
			function getItemDom(obj){
				var html = '<div class="item" onclick="edit(\''+ obj.tag_id +'\')">\
							<div class="icon-box" style="background-color: '+ obj.color +';">\
								<svg class="icon" aria-hidden="true">\
									<use xlink:href="'+ obj.icon +'"></use>\
								</svg>\
							</div>\
							<div class="my-flex text-box">'+ obj.title +'</div>\
							<span></span>\
						</div>'
				return html;
			}
			
			function titleAction(type, flag) {
				//type 0收入 1支出 2转账
				//flag true全变化 false是按钮变化
				$('.btn-title').removeClass('action');
				switch(type) {
					case 0:
						$('.btn-title.left').addClass('action');
						break;
					case 1:
						$('.btn-title.right').addClass('action');
						break;
				}
				if(flag && !!mSwiper) mSwiper.slideTo(type);
			}
			
		</script>
	</body>

</html>